<template>
  <view style="display: flex; flex-direction: column; align-items: center">
    <uni-card style="width: 93%" class="card" :is-shadow="false" is-full>
      <view>
        <text class="title">{{ detail.title }}</text>
      </view>
      <view style="display: flex; justify-content: space-between">
        <text class="left">来源：{{ detail.source }}</text>
        <text class="right">时间：{{ detail.publishDate }}</text>
      </view>
    </uni-card>
    <uni-card style="width: 93%" class="card" :is-shadow="false" is-full>
      <view style="margin-top: 15px" v-html="detail.content"> </view>
    </uni-card>
    <uni-card style="width: 93%" class="card" :is-shadow="false" is-full>
      <text class="left">附件</text>
      <view class="right">
        <view v-if="detail.files.length == 0">暂无</view>
        <view v-else>
          <view
            style="color: #2880e4; margin-right: 20rpx; margin-top: 10rpx"
            v-for="(item, index) in detail.files"
            :key="index"
            @click="xiazai(item)"
            >{{ item.name }}</view
          >
        </view>
      </view>
    </uni-card>
  </view>
</template>
<script>
import { news } from "@/utils/api.js";
export default {
  data() {
    return {
      title: "Hello",
      city: 0,
      value: 0,
      items: ["相关法律", "政策文件"],
      current: 0,
      cityList: [
        { value: 0, text: "临沂市" },
        { value: 1, text: "罗庄区" },
        { value: 2, text: "河东区" },
        { value: 3, text: "兰山区" },
      ],
      rangeList: [
        { value: 0, text: "招标公示" },
        { value: 1, text: "中标公示" },
        { value: 2, text: "成交公示" },
      ],
      detail: {},
    };
  },
  onLoad(e) {
    let data = JSON.parse(e.data);
    this.getDetail(data.id);
  },
  methods: {
    async getDetail(e) {
      let res = await news.getDetail({
        newsId: e,
      });
      console.log(res);
      this.detail = res.data;
    },
    supply(e) {
      uni.navigateTo({
        url: "/pages/" + e + "/" + e,
      });
    },
    change(e) {
      console.log("e:", e);
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    xiazai(e) {
      uni.downloadFile({
        url: e.url, //仅为示例，并非真实的资源
        success: (res) => {
          console.log(res);
          if (res.statusCode === 200) {
            console.log("下载成功");
            var oA = document.createElement("a");
            oA.download = e.name; // 设置下载的文件名，默认是'下载'
            oA.href = res.tempFilePath; //临时路径再保存到本地
            document.body.appendChild(oA);
            oA.click();
            oA.remove(); // 下载之后把创建的元素删除
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.card {
  width: 100%;
  ::v-deep img {
    max-width: 100%;
  }
}
.title {
  font-size: 17px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #242424;
  line-height: 24px;
}
.left {
  float: left;
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #a2a2a2;
  line-height: 20px;
}
.right {
  float: right;
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #a2a2a2;
  line-height: 18px;
}
.project-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .project-info {
    width: 92%;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    .info-left {
      image {
        width: 220rpx;
        height: 300rpx;
        border-radius: 10rpx;
      }
    }
    .info-right {
      width: 470rpx;
      margin-left: 8rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .project-detail {
        font-size: 28rpx;
        color: #303030;
      }
    }
  }
}
</style>
